<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="${pageContext.request.contextPath}/css/customer/login.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/dist/jquery-3.6.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/dist/jsencrypt/bin/jsencrypt.min.js"></script>
</head>
<style>
    input:focus{
        border: 1px solid #38c4ff;
        box-shadow: 0 0 5px #38c4ff;
        outline: 0;
        transition: box-shadow .25s linear 0s;
        -webkit-transition: box-shadow .25s linear 0s;
    }
    .userTel{
        width: 306px;
        height: 28px;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        font-size: 14px;
        color: #666;
        line-height: 28px;
        padding: 6px 0 6px 12px;
        box-shadow: 0 0 5px #fff;
        outline: 0;
        transition: box-shadow .25s linear 0s;
        -webkit-transition: box-shadow .25s linear 0s;
        margin: 10px 0px 5px 60px;
    }
    .userpassword{
        width: 306px;
        height: 28px;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        font-size: 14px;
        color: #666;
        line-height: 28px;
        padding: 6px 0 6px 12px;
        box-shadow: 0 0 5px #fff;
        outline: 0;
        transition: box-shadow .25s linear 0s;
        -webkit-transition: box-shadow .25s linear 0s;
        margin: 10px 0px 5px 60px;
    }
    h1{
        margin: 0px 0 40px 0px;
    }
    p{

        margin: 0 0 0 60px;
    }
</style>
<body>
<div id="loginDiv">
    <form action="${pageContext.request.contextPath}/login" id="form" method="post">
        <h1 style="text-align: center;color: #38c4ff;">自友行登录</h1>
        <p style="font-size: 14px">没有账号?<a style="text-decoration:none; font-size: 14px;color: #38c4ff" href="register.jsp" class="regist">立即注册<label id="sign_up_trip"></label></a></p>
        <input id="telNumber" type="text" name="custTelno"  value="${custTelno}" maxlength="11"  class="userTel" placeholder="请输入手机号">
        <p style="font-size: 12px;color: red;" id="name_trip"></p>
        <input type="hidden" name="consumerPassword" id="password1">
        <input id="password" type="password" name="custPassword"   class=" userpassword" placeholder="请输入密码">
        <p style="font-size: 12px;color: red;" id="password_trip"></p>
        <div style="text-align: center;margin-top: 30px;">
            <input type="button" class="button moco-btn" value="立即登录">
            <input type="submit" style="visibility: hidden" class="go">
        </div>
    </form>
</div>

<script>
    //验证手机号码
    document.querySelector("#telNumber").onblur = checkUserTel;
    function  checkUserTel(){
        var userTel = document.querySelector("#telNumber").value;
        if(userTel === "" ){// 是否为空
            //(3)消息提示
            document.querySelector("#name_trip").innerText = "手机号码不能为空";
            return false;
        }else if(!/^(0|86|17951)?1[0-9]{10}$/.test(userTel) ){
            document.querySelector("#name_trip").innerText = "不是有效的手机号码";
            return false;
        }else{
            document.querySelector("#name_trip").innerText = "";
            return true;
        }
    }
    //验证密码
    document.querySelector("#password").onblur = checkPassword;
    function  checkPassword(){
        var password = document.querySelector("#password").value;
        if(password === "" || password == null){// 是否为空
            //(3)消息提示
            document.querySelector("#password_trip").innerText = "密码不能为空";
            return false;
        }else if(!/^[a-zA-Z0-9]\w{5,19}$/.test(password) ){
            document.querySelector("#password_trip").innerText = "密码只能由6~20字母数字或下划线";
            return false;
        }else{
            document.querySelector("#password_trip").innerText = "";
            return true;
        }
    }

    var PUBLIC_KEY = '';
    $(".moco-btn").click(function () {
        $.ajax({
            type: "GET",
            url: "${pageContext.request.contextPath}/publickey",
            dataType: 'json',
            success: function (result) {
                PUBLIC_KEY = result.data; //获取公钥

                var encrypt = new JSEncrypt()
                encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----' + PUBLIC_KEY + '-----END PUBLIC KEY-----');
                var password = $(".userpassword").val();
                var encrypted = encrypt.encrypt(password);
                // $(".password").val(encrypted);
                console.log('公钥:%o', PUBLIC_KEY);
                console.log('密码:%o', password)
                console.log('加密后数据:%o', encrypted);
                $('#password1').val(encrypted);


                if (checkUserTel()  && checkPassword()) {
                    $(".go").click();
                };
            }

        });
    });
</script>
</body>
</html>
